<template>
  <a-drawer
    placement="top"
    :closable="false"
    :visible="addVisible"
    height="100%"
    wrapClassName="add-power"
    @close="closeTopDrawer"
    :destroyOnClose="true"
    :headerStyle="{
      background: '#f0f1f5',
      padding: '0 0.2rem 0 0.3rem',
      flexGrow: 0,
    }"
    :bodyStyle="{
      padding: '0.3rem 0 0 0',
      flexGrow: 1,
    }"
    :drawerStyle="{
      display: 'flex',
      flexDirection: 'column',
    }"
  >
    <template #title>
      <div class="head-box">
        <span>添加新车辆</span>
        <div class="head-btn">
          <a-button @click="closeTopDrawer">取消</a-button>
          <a-button type="primary" class="save-btn" @click="saveAdd"
            >保存</a-button
          >
        </div>
      </div>
    </template>
    <div class="content-box">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="content-width">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="车牌号" prop="carNo" required>
                <a-input v-model="form.carNo" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="车辆类型" prop="carType" required>
                <a-input v-model="form.carType" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="责任人" prop="dutyUser" required>
                <a-input v-model="form.dutyUser" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="使用部门" prop="useDepartment" required>
                <a-input
                  v-model="form.useDepartment"
                  class="input-width"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="车辆价格" prop="carPrice" required>
                <a-input
                  v-model="form.carPrice"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="行驶里程" prop="traveled" required>
                <a-input
                  v-model="form.traveled"
                  class="input-width"
                  type="number"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="加油充值记录" prop="recharge" required>
                <a-input v-model="form.recharge" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="保修记录" prop="warranty" required>
                <a-input v-model="form.warranty" class="input-width"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="入场时间" prop="inTime" required>
                <a-date-picker
                  v-model="form.inTime"
                  :disabled-date="disabledStartDate"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="入场时间"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="出场时间" prop="outTime" required>
                <a-date-picker
                  v-model="form.outTime"
                  :disabled-date="disabledEndDate"
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="出场时间"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="保险日期" prop="insuranceDate" required>
                <a-date-picker
                  v-model="form.insuranceDate"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </div>
  </a-drawer>
</template>
<script>
import moment from "moment";
import { carSaveSingle } from "@/api/operationApi.js";
export default {
  data() {
    return {
      form: {
        carNo: "",
        carType: "",
        dutyUser: "",
        useDepartment: "",
        insuranceDate: "",
        traveled: "",
        recharge: "",
        warranty: "",
        carPrice: "",
        inTime: "",
        outTime: "",
      },
      rules: {
        carNo: [
          {
            required: true,
            message: "请填写车牌号",
            trigger: "blur",
          },
        ],
        carType: [
          {
            required: true,
            message: "请填写车辆类型",
            trigger: "blur",
          },
        ],
        dutyUser: [
          {
            required: true,
            message: "请填写责任人",
            trigger: "blur",
          },
        ],
        useDepartment: [
          {
            required: true,
            message: "请填写使用部门",
            trigger: "blur",
          },
        ],
        insuranceDate: [
          {
            required: true,
            message: "请填写保险日期",
            trigger: "blur",
          },
        ],
        traveled: [
          {
            required: true,
            message: "请填写行驶里程",
            trigger: "blur",
          },
        ],
        recharge: [
          {
            required: true,
            message: "请填写加油充值记录",
            trigger: "blur",
          },
        ],
        warranty: [
          {
            required: true,
            message: "请填写保修记录",
            trigger: "blur",
          },
        ],
        carPrice: [
          {
            required: true,
            message: "请填写车辆价格",
            trigger: "blur",
          },
        ],
        inTime: [
          {
            required: true,
            message: "请填写入场时间",
            trigger: "blur",
          },
        ],
        outTime: [
          {
            required: true,
            message: "请填写出场时间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    addVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.form.outTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.form.inTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    saveAdd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form));
          params.inTime = moment(params.inTime).format("YYYY-MM-DD HH:mm:ss");
          params.outTime = moment(params.outTime).format("YYYY-MM-DD HH:mm:ss");
          params.insuranceDate = moment(params.insuranceDate).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          console.log(params);
          carSaveSingle(params).then((res) => {
            this.$message.success("新增车辆成功");
            this.$emit("reloadList");
            this.reset();
            this.$emit("update:addVisible", false);
          });
        }
      });
    },
    closeTopDrawer() {
      this.reset();
      this.$emit("update:addVisible", false);
    },
    reset() {
      this.form = {
        carNo: "",
        carType: "",
        dutyUser: "",
        useDepartment: "",
        insuranceDate: "",
        traveled: "",
        recharge: "",
        warranty: "",
        carPrice: "",
        inTime: "",
        outTime: "",
      };
    },
  },
};
</script>
  <style lang="less" scoped>
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ant-input {
      height: 32px;
    }
    .ant-form {
      height: 100%;
    }
    .input-width {
      width: 80%;
    }
    .content-width {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      /deep/.ant-form-item {
        margin-bottom: 10px;
        /deep/.ant-form-item-label {
          font-size: 12px;
          label {
            font-size: 14px;
          }
        }
      }
      /deep/.ant-form-explain {
        font-size: 12px;
      }
    }
  }
}
</style>